<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <!-- below meta tag is many important ... without this our website is not responsive   -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description"
        content="my portfolio website to showcase the work I have done so far, the services I provide and all my professionals life.">

    <!-- meta tag to rank our website (SEO) -->

    <meta name="keywords" content="HTML, CSS, JavaScript,portfolio">
    <meta name="author" content="Kedar Rothe">

    <title>Kedarnath Rothe💙💙</title>
    <link rel="stylesheet" href="css/style.css">

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@9/swiper-bundle.min.css" />

    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.2.0/fonts/remixicon.css" rel="stylesheet">

    <link rel="icon" href="images/favicon.ico?v=2">



    <!-- <script defer src="index.js"></script> -->

</head>

<body>
    <header class="header ">
        <img src="images/logo1.png" alt="This is logo image" class="logo">

        <nav class="navbar">
            <ul class="navbar-lists">
                <li><a href="#" class="navbar-link  home-link">Home</a></li>
                <li><a href="about.html" class="navbar-link  about-link">About</a></li>
                <li><a href="service.html" class="navbar-link  service-link">Skills</a></li>
                <li><a href="#" class="navbar-link  portfolio-link">portfolio </a></li>
                <li><a href="contact.html" class="navbar-link  contact-link">Contact</a></li>
            </ul>
        </nav>


        <!-- responsive navbar -->
        <div class="mobile-navbar-btn">
            <ion-icon name="menu-outline" class="mobile-nav-icon"></ion-icon>
            <ion-icon name="close-outline" class="mobile-nav-icon"></ion-icon>
        </div>

    </header>

    <!-- ==============================================================
Main hero section starts
=============================================================  -->


    <main>
        <section class="section-hero section">
            <div class="container grid grid-two-column">
                <div class="section-hero-data">
                    <p class="hero-top-data">this is me</p>
                    <h1 class="hero-heading">kedar rothe</h1>
                    <p class="hero-para">
                        Hi, I'm Kedarnath Frontend Developer Based In Pune, Maharashtra
                    </p>
                    <div>
                        <a href="/contact.html" target="_blank" class="btn hireme-btn"><span>Hire Me</span></a>
                    </div>
                </div>

                <div class="section-hero-image">
                    <img src="images/img1-modified.png" width="350px" alt="hero image" class="hero-img" />
                </div>
            </div>
        </section>
    </main>

    <!-- ==============================================================
Bio-Data section
=============================================================  -->
    <section id="section-biodata" class="section-biodata section">
        <div class="bbd container grid grid-two-column">
            <div class="bio-image">
                <!-- <img src="images/678.png" alt="my bio data image">  -->
                <!-- <img src="images/k.webp" alt="my bio data image"> -->
                <!-- <img src="images/kk.png" alt="my bio data image"> -->
                <img src="images/k.jpg" alt="my bio data image">
            </div>
            <!-- bio right side data -->
            <div class="bio-data">
                <h2 class="common-heading">QUALIFICATION</h2>
                <div class="container grid grid-two-column">
                    <div>
                        <h2>B.Tech in Information Technology</h2>
                        <div class="edu">Vishwakarma Institute of Information Technology, Pune</div>
                        <div class="edu">2021 - 2025</div>
                        <div class="edu">9.31 CGOA</div>
                    </div>
                    <div>
                        <h2>12th Class</h2>
                        <div class="edu">SSGM college, Kopargaon</div> <br>
                        <div class="edu">2020-2021</div>
                        <div class="edu">88.89%</div>
                    </div>
                </div>

                <br />

                <div class="bio-data-stats">
                    <div class="bio-stats">
                        <h3>Java</h3>
                        <div class="bio-progress-bar ">
                            <span>85%</span>
                        </div>
                    </div>
                    <div class="bio-stats">
                        <h3>C++</h3>
                        <div class="bio-progress-bar bio-progress-bar-2">
                            <span>80%</span>
                        </div>
                    </div>
                    <div class="bio-stats">
                        <h3>HTML</h3>
                        <div class="bio-progress-bar bio-progress-bar-3">
                            <span>75%</span>
                        </div>
                    </div>
                    <div class="bio-stats">
                        <h3>CSS</h3>
                        <div class="bio-progress-bar bio-progress-bar-4">
                            <span>65%</span>
                        </div>
                    </div>
                    <div class="bio-stats">
                        <h3>JavaScript</h3>
                        <div class="bio-progress-bar bio-progress-bar-5">
                            <span>50%</span>
                        </div>
                    </div>
                    

                </div>
                <div class="bio-data-btn">
                    <a href="https://drive.google.com/file/d/1coe8m2aHqWnG2TMrxgb1ZHxfh6GGx9Ad/view?usp=share_link"
                        download target="_blank" class="btn">Download CV</a>
                </div>
            </div>
        </div>
    </section>

    <!-- ==============================================================
portfolio section
=============================================================  -->

    <section class="section section-portfolio" id="portfolio-section">
        <div class="container">
            <h2 class="common-heading">Latest Works</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum quos, officia ipsum deserunt incidunt
                velit eligendi expedita sunt!</p>
        </div>
        <div class="p-btns">
            <div class="btn p-btn " data-btn-num="1">Frontend</div>
            <div class="btn p-btn " data-btn-num="2">Fullstack</div>
            <div class="btn p-btn " data-btn-num="3">DSA</div>
        </div>

        <div class="grid grid-three-column container portfolio-images">
            <div class="img-overlay p-btn--1">
                <img src="images/folio/1.jpg" alt="my works" />
                <div class="overlay">
                    <div class="gitcode">
                        <a href="#" target="_blank" class="common-heading">Projrct 1 </a> <br>
                        <span><button  class="gitcode1"><a href="">code</a></button> <button  class="gitcode1"><a href="">code</a></button></span>  
                    </div>
                    <!-- <a href="#" target="_blank" class="common-heading">Projrct 1  <a href=""><i><button>code</button></i></a></a> -->
                </div>
            </div>
            <div class="img-overlay p-btn--3">
                <img src="images/folio/5.jpg" alt="my works" />
                <div class="overlay">
                    <a href="#" target="_blank" class="common-heading">Projrct 2</a>
                </div>
            </div>
            <div class="img-overlay p-btn--1">
                <img src="images/folio/3.jpg" alt="my works" />
                <div class="overlay">
                    <a href="#" target="_blank" class="common-heading">Projrct 3</a>
                </div>
            </div>
            <div class="img-overlay p-btn--1 p-btn--2">
                <img src="images/folio/1.jpg" alt="my works" />
                <div class="overlay">
                    <a href="#" target="_blank" class="common-heading">Projrct 4</a>
                </div>
            </div>
            <div class="img-overlay p-btn--2">
                <img src="images/folio/5.jpg" alt="my works" />
                <div class="overlay">
                    <a href="#" target="_blank" class="common-heading">Projrct 5</a>
                </div>
            </div>
        </div>

    </section>


    <!-- ==============================================================
Skills section
=============================================================  -->

    <section class="section section-skill">
        <div class="container">
            <h2 class="common-heading">Skills</h2>
            <p>My favorite skills</p>
        </div>
        <!-- skills data -->
        <div class="container grid grid-four-column">
            <div class="skill-box">
                <img src="images/C_Logo.png" alt="c" class="skill-img">
                <h3>C Programming</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/c-.png" alt="c" class="skill-img">
                <h3>C++ Programming</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/java.png" alt="c" class="skill-img">
                <h3>Java Programming</h3>
                <p>Advance</p>
            </div>

            <div class="skill-box">
                <img src="images/python.png" alt="c" class="skill-img">
                <h3>Python Programming</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/html.png" alt="c" class="skill-img">
                <h3>HTML</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/css-3.png" alt="c" class="skill-img">
                <h3>CSS</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/js.png" alt="c" class="skill-img">
                <h3>JavaScript</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/bootstrap.png" alt="c" class="skill-img">
                <h3>Bootstrap</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/react.png" alt="c" class="skill-img">
                <h3>React</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/nodejs.png" alt="c" class="skill-img">
                <h3>Nodejs</h3>
                <p>Intermidiate</p>
            </div>

            <div class="skill-box">
                <img src="images/database.png" alt="c" class="skill-img">
                <h3>MySQL</h3>
                <p>Intermidiate</p>
            </div>
        </div>
    </section>

    <!-- ==============================================================
                 Freelancing section-----PARALLEX EFFECT
=============================================================  -->

    <section class="section section-freelancing">
        <div class="overlay"></div>
        <div class="container">
            <h2>I am <span>available</span> for freelancing</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Debitis, esse atque commodi aut dignissimos
                ipsa.</p>
            <a href="/contact.html" class="btn">HIRE ME</a>
        </div>
    </section>


    <!-- ==============================================================
         Contact us section
=============================================================  -->

    <section class="section section-contact">
        <div class="container">
            <h2 class="common-heading">Contact Us</h2>
        </div>

        <div class="section-contact-main contact-container">
            <form action="https://formspree.io/f/xjvdaeor" method="POST">
                <div class="grid grid-two-column">
                    <div>
                        <label for="username"></label>
                        <input type="text" name="username" placeholder="Username" id="username" required
                            autocomplete="off">
                    </div>
                    <div>
                        <label for="email"></label>
                        <input type="email" placeholder="demo@gmail.com" name="email" id="email" required
                            autocomplete="off">
                    </div>
                </div>

                <div>
                    <label for="subject"></label>
                    <input type="text" name="subject" placeholder="subject" id="subject" required autocomplete="off">
                </div>
                <div>
                    <label for="textarea"></label>
                    <textarea name="Message" id="textarea" cols="30" rows="10" required placeholder="Message"
                        autocomplete="off"></textarea>
                </div>
                <div>
                    <input type="submit" value="Send Message" class="btn">
                </div>
            </form>
        </div>
    </section>



    <!-- ==============================================================
         Footer section
=============================================================  -->
    <footer class="section-footer section">
        <div class="container grid grid-four-column">
            <div class="f-about">
                <h3>About</h3>
                <p>As a student, my focus is on learning as much as I can and gaining practical experience through
                    internships and personal projects. I'm constantly experimenting with new technologies..</p>
            </div>

            <div class="f-services">
                <h3>Services</h3>
                <ul>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Web Design</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Web Development</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Mern Project</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">DSA</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="#">Packet Tracer</a>
                    </li>
                </ul>
            </div>
            
            <!-- end -->
            <div class="f-link">
                <h3>Links</h3>
                <ul>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="/index.html">Home</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="/index.html">About</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="/index.html">Services</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="/index.html">Portfolio</a>
                    </li>
                    <li>
                        <span><ion-icon name="arrow-forward-outline"></ion-icon></span>
                        <a href="/index.html">Contact</a>
                    </li>

                </ul>
            </div>

            <!-- end -->

            
            <!-- end -->

            <div class="f-address">
                <h3>Have a Question?</h3>
                <address>
                    <div>
                        <p><span><ion-icon name="location-outline"></ion-icon></span>
                            Pune, India
                        </p>
                    </div>
                </address>

                <div>
                    <p><span><ion-icon name="call-outline"></ion-icon></span>
                        <a href="tel:+917498489467">+91 7498489467</a>
                    </p>
                </div>

                <div>
                    <p><span><ion-icon name="mail-outline"></ion-icon></span>
                        <a href="mailto:kedarrothe05@gmail.com ">kedarrothe05@gmail.com</a>
                    </p>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="f-social-icons">
                <a href="https://instagram.com/rothe_kedar?igshid=ZDdkNTZiNTM=" target="_blank">
                    <ion-icon class="icons" name="logo-instagram"></ion-icon>
                </a>
                <a href="https://wa.me/7498489467" target="_blank">
                    <ion-icon class="icons" name="logo-whatsapp"></ion-icon>
                </a>
                <a href="https://www.linkedin.com/in/keadarnath-rothe-a39316258/" target="_blank">
                    <ion-icon class="icons" name="logo-linkedin"></ion-icon>
                </a>

                <div class="f-credits">
                    <p>
                        Copyright ©2023 All rights reserved | This template is made with ❤ by Kedar Rothe
                    </p>
                </div>
            </div>
        </div>
    </footer>


    <script src="index.js"></script>

    <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> 

</body>

</html>